<template>
	<view class="container">
		<hx-navbar :back="false" :backgroundColor="[255, 255, 255]" :fixed="true">
			<view slot="left" class="flex justify-center align-center container-top" style="width:100%;margin: 0 45rpx;">
				<view class="cuIcon-back" style="font-size: 36rpx;position: absolute;left: 30rpx;" @tap="back">
				</view>
				<view class="" style="font-size: 36rpx;">
					桃子
				</view>
				<view class="flex align-center" style="position: absolute;right: 30rpx;">
					<view class="" style="position: relative;">
						<i class="fa fa-shopping-cart" style="font-size: 40rpx;margin: 0 30rpx 0 10rpx;" aria-hidden="true"></i>
						<view class="tips">
							1
						</view>
					</view>
					<i class="fa fa-star" :class="collection?'yellow':''" @tap="shoucang" style="font-size: 40rpx;margin: 0 30rpx 0 10rpx;" aria-hidden="true"></i>
					<i class="fa fa-share-alt" style="font-size: 40rpx;" aria-hidden="true"></i>
				</view>
			</view>
		</hx-navbar>
		<view class="swiper-box">
			<swiper class="swiper" indicator-dots="true" :interval="interval" :duration="duration" indicator-color="rgba(255, 255, 255,1)"
			 indicator-active-color="#26C594" circular="true" active-class="ygys">
				<block v-for="(item,i) in banner" :key="i">
					<swiper-item>
						<image src="../../static/imgs/gyxqdt2.jpg" mode="widthFix" style="width: 100%;height: 100%;"></image>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<view class="paddings product">
			<view class="text">
				<view class="name">
					正宗北京平谷大桃12个
				</view>
				<view class="text-sm cu-tag">
					脆甜桃子现摘现发
				</view>
				<view class="bingjia">
					<text>月售 456</text>
					<text>好评率90%</text>
				</view>
				<view class="text-sm flex align-end">
					<view class="yhj">￥<text style="font-size: 36rpx;">112.6</text></view>
					<view class="yj">￥114</view>
				</view>
				<view class="bingjia">
					<text>运费 ￥12.0 /份</text>

				</view>
			</view>
			<view class="add">
				<view>加购物车</view>
			</view>
		</view>
		<view class="ytx"></view>

		<view class="">
			<view class="title-top flex">
				<view :class="switchs?'':'text-bold'" @click="switchhs(0)">
					详情
					<view class="xiang" v-show="!switchs"></view>
				</view>
				<view :class="switchs?'text-bold':''" @click="switchhs(1)">
					评价<text style="position: absolute;top: 8rpx;">235</text>
					<view class="xiang" v-show="switchs"></view>
				</view>
			</view>
			<!-- 详情 -->
			<view class="" v-show="!switchs">
				<image src="../../static/imgs/gyxqdt3.jpg" mode="widthFix" style="width: 100%;"></image>
			</view>
			<!-- 评价 -->
			<view class="" v-show="switchs" style="margin-left: 25rpx;margin-bottom: 150rpx;">
				<view class="pinjia-top">
					<view class="flex">
						<view class="cu-tag bg-cyan radius" :class="0==TabCur?'lights':''" @tap="tabSelect(0)">
							全部
						</view>
						<view class="cu-tag  bg-cyan radius" :class="1==TabCur?'lights':''" @tap="tabSelect(1)">
							最新
						</view>
						<view class="cu-tag  bg-cyan radius" :class="2==TabCur?'lights':''" @tap="tabSelect(2)">
							有图
						</view>
						<view class="cu-tag  bg-cyan radius" :class="3==TabCur?'lights':''" @tap="tabSelect(3)">
							好评
						</view>
						<view class="cu-tag  bg-cyan radius" :class="4==TabCur?'lights':''" @tap="tabSelect(4)">
							差评
						</view>
					</view>
				</view>
				<view class="">
					<view class="flex evaluate-box">
						<view class="touxian">
							<image src="../../static/imgs/yftouxian.png" mode="aspectFit"></image>
						</view>
						<view class="evaluate-text">
							<view class="pinglei-text">
								<view class="flex justify-between">
									<view class="">
										<view class="yfname text-bold">
											匿名用户
										</view>
										<view class="">
										<!-- 	<uni-rate v-model="value" @change="onChange" /> -->
										</view>
									</view>
									<view class="sjrq">
										2020.10.29
									</view>
								</view>
								<view class="text-bold lgdwz">
									和原来比起来差远了，口味完全不一样，一点也不新鲜。
								</view>
							</view>
							
							<view class="pinglei-img">
								
							</view>
						</view>
					</view>
					<view class="flex evaluate-box">
						<view class="touxian">
							<image src="../../static/imgs/yftouxian.png" mode="aspectFit"></image>
						</view>
						<view class="evaluate-text">
							<view class="pinglei-text">
								<view class="flex justify-between">
									<view class="">
										<view class="yfname text-bold">
											匿名用户
										</view>
										<view class="">
										<!-- 	<uni-rate v-model="value" @change="onChange" /> -->
										</view>
									</view>
									<view class="sjrq">
										2020.10.29
									</view>
								</view>
								<view class="text-bold lgdwz">
									和原来比起来差远了，口味完全不一样，一点也不新鲜。
								</view>
							</view>
							
							<view class="pinglei-img">
								<image src="../../static/imgs/pingleiimg1.png" mode="aspectFit"></image>
								<image src="../../static/imgs/pingleiimg2.png" mode="aspectFit"></image>
								<image src="../../static/imgs/pingleiimg3.png" mode="aspectFit"></image>
							</view>
						</view>
					</view>
					
					<view class="flex evaluate-box">
						<view class="touxian">
							<image src="../../static/imgs/yftouxian2.png" mode="aspectFit"></image>
						</view>
						<view class="evaluate-text">
							<view class="pinglei-text">
								<view class="flex justify-between">
									<view class="">
										<view class="yfname text-bold">
											小**子
										</view>
										<view class="">
										<!-- 	<uni-rate v-model="value" @change="onChange" /> -->
										</view>
									</view>
									<view class="sjrq">
										2020.10.28
									</view>
								</view>
								<view class="text-bold lgdwz">
										一如既往地好！从来没有让我失望过。味道超棒的，点 赞点赞！
								</view>
							</view>
							
							<view class="pinglei-img">
								<image src="../../static/imgs/pingleiimg4.png" mode="aspectFit"></image>
								<image src="../../static/imgs/pingleiimg5.png" mode="aspectFit"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="flex justify-center">
				<view class="">
					满25减10，满45减20，满60减25，满80减35
				</view>
			</view>
			<view class="button flex">
				<view class="bg-black">
					<view class="top">
						<text style="font-size: 36rpx;margin-right: 15rpx;">￥112.6</text>
						<text style="color: #999999;text-decoration: line-through">￥114</text>
					</view>
					<view class="yengfei">
						另需运费￥12
					</view>
				</view>
				<view class="bg-green">
					去结算
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import 'static/css/font-awesome.min.css';
import {uniRate} from '../../components/uni-rate/uni-rate.vue';
export default {
    components: {
        uniRate
    },
    data() {
        return {
            banner: ['color1', 'color2', 'color3'],
            interval: 2000,
            duration: 500,
            switchs: 0,
            TabCur: 0,
            value: 2,
            collection:false

        };
    },
    methods: {
        back() {
            uni.navigateBack({});
        },
        switchhs(i) {
            this.switchs = i;
        },
        tabSelect(i){
            this.TabCur = i;
        },
        onChange(e) {
            console.log('rate发生改变:' + JSON.stringify(e));
        },
        shoucang(){
		    this.collection=!this.collection;
        }
    },
};
</script>

<style>
	.yellow {
		color: #FFDC69;
	}

	.ytx {
		width: 100%;
		height: 20rpx;
		background-color: #F5F5F5;
	}

	.swiper-box {
		position: relative;
	}

	.swiper {
		width: 100%;
		height: 750rpx;
	}

	.tips {
		width: 30rpx;
		height: 30rpx;
		line-height: 30rpx;
		text-align: center;
		border-radius: 50%;
		background-color: #F3635A;
		color: #FFFFFF;
		font-size: 20rpx;
		position: absolute;
		top: 10rpx;
		right: 15rpx;
	}

	.paddings {
		padding: 30rpx 20rpx 20rpx 20rpx;
	}

	.product {
		position: relative;
		margin-bottom: 30rpx;
	}

	.product .add {
		position: absolute;
		bottom: 20rpx;
		right: 20rpx;
		width: 126rpx;
		height: 52rpx;
		line-height: 52rpx;
		border-radius: 50rpx;
		background-color: #26C594;
		color: #FFFFFF;
		text-align: center;
		font-size: 24rpx;
	}

	.product .text {
		margin-top: 20rpx;
	}

	.product .name {
		font-size: 30rpx;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.product .text-sm {
		color: #999999;
	}

	.product .text-sm.cu-tag {
		position: relative;
		left: -10rpx;
		height: 40rpx;
		transform: scale(0.9);
		color: #666666;
		font-weight: bold;
		border-radius: 10rpx;
		margin: 10rpx 0;
	}

	.product .bingjia text {
		font-size: 22rpx;
		color: #999999;
		margin-right: 20rpx;
	}

	.product .text-sm.flex.align-end {
		margin-top: 10rpx;
	}

	.product .text-sm .yhj {
		color: #FE522E;
		font-weight: bold;
	}

	.product .text-sm .yj {
		padding-top: 3rpx;
		transform: scale(0.9);
		text-decoration: line-through
	}

	.title-top {
		padding: 15rpx 25rpx;
		margin-bottom: 15rpx;
	}

	.title-top>view {
		position: relative;
		font-size: 32rpx;
		padding-bottom: 20rpx;
		margin-right: 80rpx;
	}

	.title-top .xiang {
		width: 38rpx;
		height: 2rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #26C594;
		margin: auto;
	}

	.title-top>view text {
		font-size: 20rpx;
		color: #999999;
	}

	.pinjia-top .cu-tag+.cu-tag {
		margin-left: 20rpx;
	}

	.bg-cyan {
		background-color: #E4FFF7;
		color: #26C594;
	}

	.bg-cyan.lights {
		color: #FFFFFF;
		background-color: #28AD85;
	}

	.evaluate-box {
		padding: 30rpx 0;
	}
	.evaluate-box+.evaluate-box{
		border-top: 2rpx #F5F5F5 solid;
	}

	.touxian image {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
	}

	.evaluate-text {
		flex: 1;
		margin-left: 20rpx;
		font-size: 22rpx;
	}

	.yfname {
		font-size: 32rpx;
	}
	.pinglei-text{
		width: 95%;
		margin-bottom: 15rpx;
	}
	.pinglei-img{
		
	}
	.pinglei-img image{
		width: 144rpx;
		height: 144rpx;
		border-radius: 15rpx;
	}
	.pinglei-img image+image{
		margin-left: 10rpx;
	}
	.lgdwz{
		transform: scale(0.9);
		position: relative;
		left: -30rpx;
	}
	.sjrq{
		color: #999999;
	}


	.bottom {
		width: 694rpx;
		position: fixed;
		bottom: 20rpx;
		left: 0;
		right: 0;
		margin: auto;
		background-color: #FFF7DC;
		border-radius: 30rpx 30rpx 50rpx 50rpx;
	}

	.bottom .justify-center {
		font-size: 20rpx;
		color: #E67122;
		padding: 15rpx 50rpx;
		transform: scale(.9);
	}

	.bottom .button {
		width: 100%;
		height: 90rpx;
		color: #FFFFFF;
	}

	.bottom .button i {
		font-size: 50rpx;
		margin-right: 10rpx;
	}

	.bg-black {
		width: 78%;
		background-color: #272C2B;
		color: #FFFFFF;
		border-radius: 50rpx 0rpx 0rpx 50rpx;
		padding-left: 50rpx;
		font-size: 24rpx;
	}

	.bg-black>.top {
		position: relative;
		top: 5rpx;
	}

	.yengfei {
		color: #999999;
		transform: scale(0.9);
		position: relative;
		left: -17rpx;
	}

	.bg-green {
		width: 22%;
		background-color: #26C594;
		border-radius: 0rpx 50rpx 50rpx 0rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
